<template>
    <div>
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content" >
                    <div>
                        <span class="preview-title" v-text="courseName"></span>
                        <span class="preview-line">/</span>
                        <span v-text="chapterName"></span>
                    </div>
                </div>
            </div>
        </div>
        <div id="jx-contain" >
            <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" src="../../../../static/generic/web/viewer.html?file=./../../../static/123.pdf" frameborder="0"></iframe> -->
            <div class="sideBox">
                <ul>
                    <!-- 专科版本需求 视频不存在时要隐藏 -->
                    <li @click="detalList" v-if=' _btn_flag == undefined'><i class="iconfont icon-liebiao" title="详情" style="font-size:24px"></i>列表</li>
                    <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                    <!-- <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li> -->
                    <li @click="openNoteWindow" v-if="displayVersion != ''"><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                    <li class="sideBoxActive" v-else><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                </ul>
            </div>
            <div class="jx-content" v-if="displayVersion">
                <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" :src="displayVersion" frameborder="0"></iframe> -->
                <!-- yx 修改因为界面不显示 -->
                <div class=" markdown-body editormd-preview-container" v-html="displayVersion"></div>
            </div>
            <div class="no-data-tips" v-else>
                <img src="./../../../assets/images/index_no_data.png" />
                <p>暂无内容</p>
            </div>
        </div>
        <!-- 视频盒子 -->
        <el-dialog
            title="视频"
            :visible.sync="dialogVisible2"
            width="40%"
            @close='closeVideoDialog'
            :close-on-click-modal="false"
            :modal-append-to-body="false"
            >
            <!-- <video id="video" autoplay controls class="videoShow" disablePictureInPicture  controlslist="nodownload" :src="videoUrl" ></video> -->
            <video id="video2"    class="video-js vjs-default-skin vjs-big-play-centered" controls  preload="auto" data-setup='{}' width="100%" height="346"  style="object-fit:fill" >
                <source  :src="videoUrl" >
            </video>
        </el-dialog>
        <!-- 笔记盒子 -->
        <div class="el-dialog__wrapper el-annotation NotesBox" id="onlyDialog">
            <div role="dialog" aria-modal="true" aria-label="批注" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">批注</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <el-input id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
                    <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="NoteSave" class="button-style saveNote">保存</button>
                        <button  @click="clearContent" class="button-style clear" :class="{ active: noteVal.length > 0 }" style="margin-left:6px;">清除</button>
                    </span>
                </div>
            </div>
        </div>
        <!-- 专科版本添加详情盒子 -->
        <div class="detailBox blocks">
            <div class="chapterList-top">
                <p class="fl">章节列表</p>
                <div class="fr"><i class="iconfont icon-Group-" @click="deleteFns"></i></div>
            </div>
            <el-collapse  accordion v-model="activeName" @change="handleChange">
                <div v-for="(item,index) in appList"  :key="index" >
                    <el-collapse-item v-if="item.levels == 3" :name='index'>
                        <template slot="title">
                            <div class="collapsTitle">
                                 <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                <i class="iconfont icon-baoguofahuo" v-else></i>
                                <span class="collapsTitle_span">单元{{index+1}}&nbsp;{{item.name}}</span>
                            </div>
                        </template>
                        <div v-if=" item.children.length > 0">
                            <div v-for="(items,indexs) in item.children"  :key="indexs" >
                                <div class="courseName">
                                    {{indexs+1}}&nbsp;{{items.name}}&nbsp;
                                    <i class="iconfont icon-diannao-copy" v-if="items.type == 2 || items.type == 3" style="vertical-align:baseline"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="items.type == 4"></i>
                                </div>
                                 <!-- 多加数据为空 -->
                                <div v-if="items.otherInfo.length <=0 ">
                                    <span style="padding-left:28px; color:rgb(66, 66, 66)">暂无数据</span>
                                </div>
                                <div  v-else class="detailbox" v-for="(item3,index3) in items.otherInfo"  :key="index3" @click="EnteDetails(item3,item,items)" >
                                    <div class="infoName" :class="item3.type == 2 && item3.id == ChapterId? 'studying':''">
                                        <i class="iconfont icon-42" v-if="!item3.show " style="color:#424242"></i>
                                        <span class="crile" :class="item3.type == 2 && item3.id == ChapterId? 'crileBg':''" v-else></span>
                                        <span class="Tiltlefiles" v-if="item3.show">{{item3.name}}</span><i class="iconfont icon-diannao-copy" v-if="item3.experimentCourseFlag && item3.name != '实验学习'"></i>
                                        <span class="Tiltlefiles" v-if="!item3.show " style="color:#424242">{{item3.name}}</span>

                                    </div>
                                    <div class="fr studying" v-if="item3.type == 2 && item3.id == ChapterId">正在学<i class="iconfont icon-shijian00"></i></div>
                                </div>
                            </div>
                        </div>
                        <div v-else style="padding-left:25px;">暂无数据</div>
                    </el-collapse-item>
                    <el-collapse-item  v-if="item.levels == 2" :name='index'>
                        <template slot="title">
                             <div class="collapsTitle">
                                    <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                    <i class="iconfont icon-baoguofahuo" v-else></i>
                                    <span class="collapsTitle_span">章节{{index+1}}&nbsp;{{item.name}}&nbsp;</span>
                                    <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3" style="vertical-align:baseline"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4"></i>
                                </div>
                        </template>
                        <div v-if="item.otherInfo.length > 0">
                            <div class="detailbox" v-for='(item2,index4) in item.otherInfo' :key="index4" @click="EnteDetails(item2,item)" >
                                <div class="infoName" :class="item2.type == 2 && item2.id == ChapterId? 'studying':''">
                                    <i class="iconfont icon-42" v-if="!item2.show " style="color:#424242" ></i>
                                    <span class="crile" :class="item2.type == 2 && item2.id == ChapterId? 'crileBg':''" v-else></span>
                                    <span class="Tiltlefiles" v-if="item2.show">{{item2.name}}</span><i class="iconfont icon-diannao-copy" v-if="item2.experimentCourseFlag && item2.name != '实验学习'"></i>
                                    <span class="Tiltlefiles" v-if="!item2.show " style="color:#424242">{{item2.name}}</span>
                                </div>
                                <div class="fr studying" v-if="item2.type == 2 && item2.id == ChapterId" >正在学<i class="iconfont icon-shijian00"></i></div>
                            </div>
                        </div>
                        <div v-else style="padding-left:25px;">暂无数据</div>
                    </el-collapse-item>
                </div>
            </el-collapse>
        </div>
        <!-- 专科版本弹窗 -->
       <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtual" width="460px">
            <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>有其它实验正在进行中，是否停止它进入该实验?</p>
            </div>
            <span slot="footer" class="dialog-footer btnlist">
                <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="VirtualSave">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import videojs from 'video.js'   //视频
    import $ from "jquery";
    export default{
        data(){
            return {
                displayVersion: '',
                wid:0,
                hei:0,
                // 视频地址
                videoUrl:'',
                // 视频地址防关闭
                videoUrlCopy:'',
                dialogVisible1: false,
                // 视频显示隐藏
                dialogVisible2: false,
                // 学习笔记值
                noteVal:'',
                // 课程名称
                courseName: '',
                // 章节名称
                chapterName: '',
                //专科版本
                activeName:'',
                //专科数据
                appList:[],
                //跳转时带有是否添加班级
                userStatus:'',
                roles:'',
                courseId:'',
                //占用弹窗
                dialogVirtual:false,
                //是否从技术库跳转的标识
                _btn_flag:'',
                //存储点击的那个章节id
                clickId:'',
                openFlag:'',

                // 班级ID
                classId: '',
                //章节列表
                singleTask:'',
                stepType:'',
                myVideo2:''


            }
        },
        created () {
            let self = this
            //班级Id
            self.classId = self.$route.query.classId
            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0]
            // 课程ID
            self.courseId = self.$route.query.courseId
            // 章节ID
            self.ChapterId = self.$route.query.chapterId
            //专科版本
            self._btn_flag = self.$route.query._btn_flag
            // 初始化获取资源
            self.InitGetResource()
            // 初始化头部信息
            self.InitHeaderInfo()
            //专科版本q详情数据
            self.DetailData()
            //是否添加过班级
            self.ClassInit()
            //yx 添加分辨率判断
            self.$nextTick(()=>{
                if(window.screen.height <= 900){
                    //console.log(window.screen.height,147)
                    $('.blocks').css('max-height','520px')
                    $('.detailBox').css('max-height','520px')

                }
            })

        },
        destroyed(){
            if(this.myVideo2){
                this.myVideo2.dispose()
            }

        },
        methods:{
            // 初始化头部信息
            InitHeaderInfo() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 课程名称
                        self.courseName = res.data.courseName
                        // 章节名称
                        self.chapterName = res.data.chapterName
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化获取资源
            InitGetResource() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/detail/resource?type=2').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (res.data.preparationMaterials.displayVersion.length > 0) {
                            self.displayVersion = res.data.preparationMaterials.displayVersion[0].htmlContent
                        }
                        self.theoryVideoData = res.data.theoryVideo.displayVersion
                        // self.videoUrl = res.data.theoryVideo.displayVersion[0].filePath
                        if (res.data.theoryVideo.displayVersion.length > 0) {

                           self.videoUrlCopy = res.data.theoryVideo.displayVersion[0].filePath
                           // self.videoUrlCopy =  'https://www.runoob.com/try/demo_source/movie.mp4'
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 打开笔记获取笔记信息
            openNoteWindow(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/resource/notes?notesType=2&pageNumber=1').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.noteVal = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                $("#onlyDialog").show()
                //隐藏详情
                $('.detailBox').hide()
            },
            // 关闭笔记
            closeNoteWindow(){
                $("#onlyDialog").hide();
            },
            // 学习笔记保存
            NoteSave(){
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/resource/notes',{
                    notesType: 2,
                    pageNumber: 1,
                    content: self.noteVal
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        $("#onlyDialog").hide()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 二期需求
            // 批注清除内容
            clearContent() {
                let self = this
                if(self.noteVal.length == 0){
                    return
                }
                self.noteVal = ''
            },
            // 视频弹窗
            videoDialog(){
                let self = this
                self.videoUrl = self.videoUrlCopy
                self.dialogVisible2 = true

                this.$nextTick(()=>{
                    self.myVideo2 = videojs('video2', {
                    bigPlayButton: true,
                    textTrackDisplay: false,
                    posterImage: false,
                    errorDisplay: false,
                    controls :true,
                    height: 400,
                    width: 400,

                    playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                })
                    self.myVideo2.src(self.videoUrlCopy)
                    self.myVideo2.load(self.videoUrlCopy)
                })
            },
            // 关闭视频弹窗
            closeVideoDialog() {
                let self = this
                self.videoUrl = ''
                this.$nextTick(()=>{
                    this.myVideo2.pause()

                })
            },
            //专科版本建设
            //初始化详情列表
            handleChange(val){
                //val 索引
                this.openFlag = val
                let vals = String(val)
                this.openFlag = vals
            },
            DetailData(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.appList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //点击关闭
            deleteFns(){
                $('.detailBox').hide()
            },
            //跳转
            EnteDetails(item,itembig,items){
                let self = this

                self.singleTask =  item.chapterId

                if(itembig.levels == 2 ){
                    self.stepType = itembig.stepTypeStr
                }else if( itembig.levels == 3){
                    self.stepType = items.stepTypeStr
                }
                //如果为真，可以跳转

                if(item.name == '理论学习'|| item.name == '任务引导'){
                    self.$router.push({
                        path:'/Teaching/MyCourses/CoursewareDetail',
                        query:{
                            courseId: self.courseId,
                            chapterId: item.id,
                            classId:self.classId,
                            singleChaper:item.id,
                        }
                    })
                }else if(item.name == '教学资源'){
                    self.$router.push({
                        path:'/Teaching/MyCourses/CourseResourceDetail',
                        query:{
                            courseId: self.courseId,
                            chapterId: item.id,
                            classId:self.classId,
                            singleChaper:item.id,
                        }
                    })
                }else if(item.name == '备课材料'){
                    self.$router.push({
                        path:'/Teaching/MyCourses/CourseMaterialDetail',
                        query:{
                            courseId: self.courseId,
                            chapterId: item.id,
                            classId:self.classId,
                            singleChaper:item.id,
                        }
                    })
                    window.location.reload()
                }else if(item.name == '实验学习' || item.experimentCourseFlag){
                    if(self.userStatus == 'NOT_CREATE_CLASS'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/VirtualMachineManual',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                stepTypeStr: self.stepType,
                                singleChaper:self.singleTask
                            }
                        })
                    }else if(self.userStatus == 'EXIST_CLASS'){
                        self.clickId = item.id
                        self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+item.id).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            if(res.data.allocated){

                                self.$http.get('/tes/experiment/course/'+item.id+'/prompt').then(response => {
                                    let res = response.data
                                    if(res.code == '200'){
                                        if(res.data){
                                            // 弹窗是否强制跳转
                                            self.dialogVirtual = true
                                        }else{
                                            if (self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
                                                // 跳转实验页
                                                self.$router.push({
                                                    path: "/Teaching/MyCourses/VirtualMachine",
                                                    query: {
                                                        courseId: self.courseId,
                                                        chapterId: item.id,
                                                        classId:self.classId,
                                                        stepTypeStr: self.stepType,
                                                        singleChaper:self.singleTask
                                                    }
                                                })
                                            }else if(self.roles == 'STUDENT'){
                                                // 跳转实验页
                                                self.$router.push({
                                                    path: "/Teaching/MyCourses/STVirtualMachine",
                                                    query: {
                                                        courseId: self.courseId,
                                                        chapterId: item.id,
                                                        classId:self.classId,
                                                        stepTypeStr: self.stepType,
                                                        singleChaper:self.singleTask
                                                    }
                                                })
                                            }
                                        }
                                    }else{
                                        self.$message.error(res.message)
                                    }
                                }).catch(err => {
                                    console.log(err)
                                })
                            }else{
                                self.$router.push({
                                    path: '/Teaching/MyCourses/VirtualMachineManual',
                                    query: {
                                        courseId: self.courseId,
                                        chapterId: item.id,
                                        classId:self.classId,
                                        stepTypeStr: self.stepType,
                                        singleChaper:item.id,

                                    }
                                })
                            }
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                    }
                }else if(item.name == '随堂练习'){
                    //分为学生和老师身份
                    if(self.roles == 'STUDENT'){
                        if(self.userStatus=='NOT_CREATE_CLASS'){
                            self.typesStatus = 1   //没有班级时传1  不显示提交按钮
                        }else{
                            self.typesStatus = 2  //有班级时传2 显示提交按钮
                        }
                        self.$router.push({
                            path: "SPractice",
                            query: {
                                courseId: self.courseId,
                                chapterId: item.id,
                                typesStatus:self.typesStatus,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                        self.$router.push({
                            path: "TPractice",
                            query: {
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }
                }

            },
            //点击详情
            detalList(){
                let self = this
                let IndexValue;
                for(let i =0; i< self.appList.length; i++){
                    if(self.appList[i].chapterIds.includes(Number(self.ChapterId))){
                        IndexValue = i
                    }
                }
                // for(let i =0; i< this.appList.length; i++){
                //     if(this.appList[i].recentlyStudiedFlag == 1){
                //         IndexValue = i
                //     }
                // }
                this.activeName = IndexValue
                //最近学习索引等于打开这项
                this.openFlag = IndexValue
                this.scrollFn(790)
                //判断屏幕分辨率
                if(window.screen.height <= 900){
                    this.scrollFn(540)
                }
                $('.detailBox').stop().slideToggle()
                //批注隐藏
                $('.NotesBox').hide()
            },
            //自动到最近学习
            scrollFn(n){
                this.$nextTick(()=>{
                    let topValue = $('.studying').parent().offset().top
                    //console.log(topValue,7878)
                    if(topValue > n){
                        $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top-100},20)
                    }

                })
            },
            // 是否添加过班级
            ClassInit() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/user-status').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.userStatus = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 确定跳转实验详情
            VirtualSave(){
                let self = this
                if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                    // 跳转实验页
                     self.$router.push({
                        path: "/Teaching/MyCourses/VirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                            stepTypeStr: self.stepType,
                            singleChaper:self.singleTask
                        }
                    })
                }else if(self.roles == 'STUDENT'){
                     self.$router.push({
                        path: "/Teaching/MyCourses/STVirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                            stepTypeStr: self.stepType,
                            singleChaper:self.singleTask
                        }
                    })
                }
                self.dialogVirtual = false
            },
        },
        mounted(){
            let screenWidth=document.documentElement.clientWidth;
            let screenHeight=document.documentElement.clientHeight;
            this.wid = '100%';
            this.hei = screenHeight - 200;
        }
    }
</script>
<style scoped>
    .video-js{
        width: 100%;
        height: 400px;
    }
    .dialogList>>>.el-dialog__footer{
        text-align: center;
    }
    .blocks::-webkit-scrollbar{
        width: 5px;
        height: 5px;
    }
    .blocks::-webkit-scrollbar-thumb {
        background: #4a4a4a;
        border-radius:50px;
    }
    .blocks{
        overflow-y: scroll;
        max-height: 760px;
    }
    .el-collapse{
        border:none;
    }
    .el-collapse-item>>>.el-collapse-item__header{
        background: #2d3136;
        color: #fff;
        border-bottom:none;
        text-align: center
    }
    .el-collapse-item>>>.el-icon-arrow-right{
        display: none;
    }
    .el-collapse-item>>>.el-collapse-item__content{
        background: #26292c;
        color: #a2a3a4;
        padding: 5px 20px;

    }
    .el-collapse-item__content>div{
        padding: 4px 0;
    }
    .el-collapse-item>>>.el-collapse-item__wrap{
        border-bottom:none;
    }
</style>
<style lang="scss">
    .el-dialog__wrapper{
        box-shadow: 0px 0px 20px #4a4a4a42
    }
    #onlyDialog{
        .el-dialog{
            box-shadow: 0px;
            .el-dialog__footer{
                text-align: center;
            }
            .el-textarea{
                textarea{
                    resize: none;
                }
            }
        }
    }
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
 .preview-top {
    height: 60px;
    margin: 0 auto;
    .preview-top1 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #101937;
        position: fixed;
        top: 0;
        color: #fff;
        z-index: 99;
        font-size: 14px;
        .preview-top-content {
            width:1200px;
            margin:0 auto;
            span{
                margin-right:40px;
            }
            .preview-title {
                font-size: 18px;
                margin-right:0;
            }
            .preview-line{
                margin:0 6px;
            }
        }
    }
    .preview-top2 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        position: fixed;
        top: 80px;
        padding:0;
        font-size: 14px;
        .preview-top-content{
            width:1200px;
            margin:0 auto;
            padding:0 40px;
            .button-style{
                margin-left:20px;
            }
        }
    }
}
// 笔记盒子 提问盒子
    #onlyDialog{
        // height: 396px;
        width: 490px;
        position: fixed;
        left: initial;
        top: 150px;
        bottom: initial;
        right: 95px;
        display: none;
        z-index: 1;
    }
    #issueDialog{
        width: 410px;
        position: absolute;
        left: initial;
        top: 210px;
        bottom: initial;
        right: 95px;

    }
    #onlyDialog .el-dialog,#issueDialog  .el-dialog{
        border-radius: 5px;
        margin: 0!important;
        padding: 0;

    .el-dialog__header {
        background: $white;

        height: auto;
        line-height:initial;
        padding: 20px 20px 10px;

        .el-dialog__title {
            color: #070e28;
            line-height: 24px;
            font-size: 16px;
            float: left;
        }
    }

    .el-dialog__headerbtn {
        top: 20px;

        .el-dialog__close {
            color: #070e28;

            &:hover {
                color: #070e28;
            }
        }
    }
    #noteVal{
        overflow: auto;
    }
}
    //主体
    #jx-contain{
        position: relative;
        .jx-content{
            margin-top: 40px;
        }
        .sideBox{
            position: fixed;
            top:100px;
            right:25px;
            width: 60px;
            max-height: 240px;
            background: #1c1f21;
            color: $white;
            text-align: center;
            border-radius: 5px;
            z-index: 9;
            .sideBoxActive{
                color: #6d6d6d;
                pointer-events: none;
                cursor: default;
                opacity: 0.6;
                .iconfont{
                    display: block;
                    margin-bottom: 8px;
                    font-size: 19px;
                    color: #6d6d6d;
                }
            }
            li{
                height: 36px;
                width: 25px;
                display: block;
                font-size: 12px;
                margin: 30px auto 38px;
                position: relative;
                cursor: pointer;
                color: #dfe0e0;
                .iconfont{
                    display: block;
                    //margin-bottom: 8px;
                    font-size: 19px;

                }
                 &:hover{
                    color: #fff;
                }
            }

        }
        // 暂无数据
        .no-data-tips{
            padding-top: 10%;
            text-align: center;
            &>p{
                margin: 30px 0;
                color: #9999;
                font-size: 16px
            }
        }
    }
     // 二期需求
    .el-annotation, .el-notes{
        .button-style{
            &.clear{
                color: #bbbbbb;
                border: 1px solid #bbbbbb;
                &:hover{
                    color: #bbbbbb;
                    border: 1px solid #bbbbbb;
                    background: #fff;
                }
                &.active{
                    color: #1277eb;
                    border: 1px solid #1277eb;
                    &:hover{
                        background: #1277eb;
                        color: #fff;
                    }
                }
            }
        }
    }
    //专科版本需求
    //详情盒子
    .detailBox{
        width: 400px;
        position: fixed;
        top: 100px;
        bottom: initial;
        right: 95px;
        background: #26292c;
        max-height: 760px;
        border-radius:4px;
        display: none;
        z-index: 9;
        .chapterList-top{
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            padding: 0 18px;
            &>p{
                line-height: 50px;
                color: #a2a3a4;
            }
            i{
                color: #a2a3a4;
                &:hover{
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
        .infoName{
            display: inline-block;
            &:hover{
               span{color: #1374e4;}
               .crile{
                    background: #1374e4;
                }
            }
        }
        .icon-diannao-copy{
            font-size: 14px;
            margin-left: 8px;
            color: #1374e4;
            vertical-align:super
        }
        .courseName{
            margin: 5px 0;
            cursor: pointer;
            &:hover{
                color: #fff;

            }
            .icon-tubiaozhizuomoban1{
                color: #1374e4;
                font-size: 16px;
            }
        }
    }
    .collapsTitle{
        text-align: left;
        // margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 22px;
        color: #a2a3a4;
        .collapsTitle_span{
            max-width: 270px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 13px;
        }
        .icon-chaibaoguoqujian{
            color: #a2a3a4;
            font-size: 14px;
        }
        &:hover{
            color: #fff;
            .icon-chaibaoguoqujian{
                 color: #fff;
            }
        }
        .icon-tubiaozhizuomoban1{
            color: #1374e4;
            font-size: 16px;
        }
    }
    .icon-shijian00{
        color: #1374e4;
        margin-left: 5px
    }

    .crile{
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #a2a3a4;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 9px;

    }
    .studying{
       color: #1374e4;
    }
    .crileBg{
        background: #1374e4;
    }
    .detailbox{
        padding:2px 0 2px 15px;
        cursor: pointer;
        &:hover{
            color: #1374e4;
            .crile{
                background: #1374e4
            }
        }
    }
    .Tiltlefiles{
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 300px;
        cursor: pointer;
    }

    .icon-42{
        font-size: 12px;
        vertical-align: text-bottom;
        margin-left: -2px;
        margin-right: 5px;
    }
    .dialogList{
        .dialog-content{
            text-align: center;
            i{
                font-size: 50px;
                color: #d6d6d6;
                display: block;
                margin-top: 25px;
            }
            p{
                font-size: 14px;
                text-align: center;
                line-height: 18px;

            }
            .handbook-item{
                text-align: center;
                margin-top: 30px;
            }
        }
        .btnlist{
            .button-style{
                width: 90px;
            }
        }
    }

</style>
